/*
* @Author: sc
* @Date:   2019-01-13 14:42:48
* @Last Modified by:   sc
* @Last Modified time: 2019-01-20 15:52:20
*/
/*
* @Author: sc
* @Date:   2019-01-11 21:19:14
* @Last Modified by:   sc
* @Last Modified time: 2019-01-12 21:04:10
*/

import React from 'react';
import {BrowserRouter as Router, Route, Switch, Link} from 'react-router-dom';
import {inject, observer } from 'mobx-react';
import { Layout, Input, Icon, message} from 'antd';
import PropTypes 				from "prop-types";

import './index.css'

@inject('store')
@observer
class Top extends React.Component {
	// context中的路由参数
	static contextTypes = {
    	router: PropTypes.object
  	}
	constructor(props) {
		super(props);
		this.state = {
		  info: '',
		};
	}

	emitEmpty = () => {
		this.addInfoInput.focus();
		this.setState({ info: '' });
	}

	onChangeInfo = (e) => {
		this.setState({ info: e.target.value });
	}
	// 输入框回车
	onInputKeyUp(e){
		if(e.keyCode === 13){
			this.addThing();
			//this.context.router.history.push("add?id=" + this.props.store.id);
		}
	}
	// 添加计划
	addThing(){
		if(!! this.state.info){
			this.props.store.addThing(this.state.info);
		}else{
			message.error("不能增加空数据！");
		}
	}
	render() {
	    const { info } = this.state;
	    const suffix = info ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
	    return (
	    	<div className="add-info">
				<Input
					placeholder="请输入计划"
					prefix={<Icon type="plus" style={{ color: 'rgba(0,0,0,.25)' }} />}
					suffix={suffix}
					value={info}
					onChange={this.onChangeInfo}
					onKeyUp={(e) => {this.onInputKeyUp(e)}}
					ref={node => this.addInfoInput = node}
				/>
	    	</div>
	    );
	}
}

export default Top;